<template>
  <div class="index-page">
    <div class="stats-section">
      <div class="stat-card" v-for="stat in stats" :key="stat.label">
        <div class="stat-icon" :style="{background: stat.bg}">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </div>
    <div class="charts-section">
      <div class="chart-card">
        <div class="chart-title">体检人数趋势</div>
        <div ref="lineChart" class="chart"></div>
      </div>
      <div class="chart-card">
        <div class="chart-title">用户类型分布</div>
        <div ref="pieChart" class="chart"></div>
      </div>
    </div>
    <div class="main-bottom">
      <div class="announcements">
        <div class="section-title">公告列表</div>
        <el-table :data="announcements" border style="width: 100%">
          <el-table-column prop="title" label="公告标题" min-width="180" />
          <el-table-column prop="date" label="发布时间" width="120" />
          <el-table-column prop="author" label="发布者" width="100" />
          <el-table-column prop="views" label="阅读量" width="80" />
        </el-table>
      </div>
      <div class="links">
        <div class="section-title">友情链接</div>
        <ul>
          <li v-for="link in links" :key="link.url">
            <a :href="link.url" target="_blank">
              <img :src="link.logo" class="link-logo" />
              <span>{{ link.name }}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'IndexPagVew',
  data() {
    return {
      stats: [
        { label: '用户数', value: 1280, icon: 'el-icon-user', bg: 'linear-gradient(135deg, #4a9eff, #6c5ce7)' },
        { label: '体检人数', value: 980, icon: 'el-icon-s-custom', bg: 'linear-gradient(135deg, #43e97b, #38f9d7)' },
        { label: '费用总数', value: '¥ 320,000', icon: 'el-icon-money', bg: 'linear-gradient(135deg, #fa709a, #fee140)' },
      ],
      announcements: [
        { title: '2024年健康体检通知', date: '2024-06-01', author: '管理员', views: 120 },
        { title: '端午节放假安排', date: '2024-05-30', author: '人事部', views: 98 },
        { title: '新冠疫苗接种须知', date: '2024-05-20', author: '医务室', views: 150 },
        { title: '健康讲座报名', date: '2024-05-15', author: '健康中心', views: 80 },
      ],
      links: [
        { name: '百度健康', url: 'https://jiankang.baidu.com/', logo: 'https://img.icons8.com/color/48/000000/baidu.png' },
        { name: '丁香园', url: 'https://www.dxy.cn/', logo: 'https://img.icons8.com/color/48/000000/medical-doctor.png' },
        { name: '健康中国', url: 'http://www.chinacdc.cn/', logo: 'https://img.icons8.com/color/48/000000/china.png' },
      ],
      lineChart: null,
      pieChart: null,
    };
  },
  mounted() {
    this.initLineChart();
    this.initPieChart();
    window.addEventListener('resize', this.resizeCharts);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts);
    if (this.lineChart) this.lineChart.dispose();
    if (this.pieChart) this.pieChart.dispose();
  },
  methods: {
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart);
      this.lineChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          boundaryGap: false,
        },
        yAxis: { type: 'value' },
        series: [{
          name: '体检人数',
          type: 'line',
          data: [120, 200, 150, 80, 70, 110],
          smooth: true,
          areaStyle: { color: 'rgba(74,158,255,0.15)' },
          lineStyle: { color: '#4a9eff', width: 3 },
          symbol: 'circle',
          symbolSize: 10,
        }],
        grid: { left: 30, right: 20, top: 40, bottom: 30 },
      });
    },
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart);
      this.pieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [{
          name: '用户类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: { show: false, position: 'center' },
          emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
          labelLine: { show: false },
          data: [
            { value: 800, name: '普通用户' },
            { value: 320, name: 'VIP用户' },
            { value: 160, name: '管理员' },
          ],
        }],
      });
    },
    resizeCharts() {
      if (this.lineChart) this.lineChart.resize();
      if (this.pieChart) this.pieChart.resize();
    },
  },
};
</script>

<style scoped>
.index-page {
  padding: 30px 30px 0 30px;
  background: #f5f7fa;
  min-height: 100vh;
}
.stats-section {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
.stat-card {
  flex: 1;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(74,158,255,0.07);
  display: flex;
  align-items: center;
  padding: 28px 32px;
  transition: box-shadow 0.3s;
  cursor: pointer;
  min-width: 200px;
}
.stat-card:hover {
  box-shadow: 0 8px 32px rgba(74,158,255,0.15);
}
.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin-right: 22px;
}
.stat-info {
  display: flex;
  flex-direction: column;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
}
.stat-label {
  color: #7f8c9a;
  font-size: 15px;
  margin-top: 6px;
}
.charts-section {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
.chart-card {
  flex: 1;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(74,158,255,0.07);
  padding: 24px 24px 12px 24px;
  display: flex;
  flex-direction: column;
  min-width: 320px;
}
.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 18px;
}
.chart {
  width: 100%;
  height: 260px;
}
.main-bottom {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
.announcements {
  flex: 2;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(74,158,255,0.07);
  padding: 24px;
  min-width: 350px;
}
.links {
  flex: 1;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(74,158,255,0.07);
  padding: 24px;
  min-width: 220px;
}
.section-title {
  font-size: 17px;
  font-weight: 600;
  color: #4a9eff;
  margin-bottom: 18px;
}
.links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.link-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-right: 10px;
  background: #f5f7fa;
  box-shadow: 0 2px 8px rgba(74,158,255,0.07);
}
.links a {
  display: flex;
  align-items: center;
  color: #2c3e50;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s;
}
.links a:hover {
  color: #4a9eff;
}
@media (max-width: 1200px) {
  .stats-section, .charts-section, .main-bottom {
    flex-direction: column;
    gap: 18px;
  }
  .stat-card, .chart-card, .announcements, .links {
    min-width: unset;
  }
}
</style> 